<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <link rel="stylesheet" href="https://static.91haoka.cn/vant.css"/>
        <script src="https://static.91haoka.cn/vue.min.js"></script>
        <script src="https://static.91haoka.cn/vantall.js"></script>
        <script src="https://static.91haoka.cn/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css"/>
		<script src="./js/q.js"></script>
		<script src="https://test91.91haoka.cn/html2canvas.min.js"></script>
     </head>
    <style type="text/css">
		*{ box-sizing: border-box; font-family:'PingFang SC'; font-size: 12px;}
		img{ max-width: 100%;}
		.kflexbc{ display: flex; justify-content: space-between; align-items: center; }
		.kflexc{ display: flex; align-items: center; }
		.kflexcc{ display: flex; align-items: center; justify-content: center;}
		.kflex{ display: flex; }
		.li{color: rgb(102, 102, 102); font-size: 16px; font-weight: bold; margin-right: 0.3rem; }
		.liact{ font-size: 20px; color: rgb(30, 30, 30); font-weight: bold; background: url('http://test91.91haoka.cn/1715304099tw650481.jpg') no-repeat center;}
    </style>
	<body>
        <div id="app" style="background: #FFFFFF;" v-cloak>
           <div style="padding: 0.3rem; background: url('http://test91.91haoka.cn/1715238841gqZ50481.jpg') no-repeat; min-height: 100vh; background-size: 100% auto; padding-top: 2.4rem;">
           
             <div style="background: #fff; width: 6.8rem; margin: 0 auto; border-radius:0.4rem; padding: 0.4rem; margin-bottom: 0.3rem; box-sizing: border-box;" v-if="ruleForm.kf_phone_display">
               <div class="kflex">
                 <div><img src="http://test91.91haoka.cn/1715239604vD050481.jpg" style="width: 0.92rem; margin-right: 0.2rem;"></div>
                 <div>
                   <div style="color: rgb(51, 51, 51); margin-bottom: 0.1rem;  font-size: 16px; font-weight:bold;">{{ruleForm.kf_phone}}</div>
                   <div style="color: rgb(102, 102, 102); font-size: 14px;">{{ruleForm.kf_phone_remark}}</div>
                 </div>
               </div>
             </div>
           
             <div style="background: #fff; width: 6.8rem; margin: 0 auto; border-radius:0.4rem; padding: 0.4rem;  margin-bottom: 0.3rem; box-sizing: border-box;" v-if="ruleForm.online_kf_display">
				 
               <div class="kflex">
                 <div><img src="http://test91.91haoka.cn/1715239631K7n50481.jpg" style="width: 0.92rem; margin-right: 0.2rem; "></div>
                 <div>
                   <div style="color: rgb(51, 51, 51); margin-bottom: 0.1rem;  font-size: 16px; font-weight:bold;">在线客服</div>
                   <div style="color: rgb(102, 102, 102); font-size: 14px;">工作时间：{{ruleForm.online_kf_work_time}}</div>
                 </div>
                 
               </div>
			   <div class="kflexcc" style="width: 100%;" v-if="ruleForm.kf_qrcode"><img :src="ruleForm.kf_qrcode" style="width: 4rem; padding: 0.2rem; margin: 0.3rem 0; box-shadow: 0px 3px 20px 0px rgba(200, 215, 234, 0.4);  border-radius: 10px;"></div>
			              
			   <div style="color: rgb(102, 102, 102); font-size: 12px; width: 100%; text-align: center;">{{ruleForm.online_kf_remark}}</div>
             </div>
			 
             <div style="background: #fff; width: 6.8rem; margin: 0 auto; border-radius:0.4rem; padding: 0.4rem;  box-sizing: border-box;" v-if="ruleForm.problem_display">
               <div style="margin-bottom: 0.4rem; font-size: 16px;">常见问题</div>
               <div v-for="(item,index) in ruleForm.problem" :key="index" style=" margin-bottom: 0.15rem;">
                 <div style="font-size: 14px; color: #666; margin-bottom: 0.1rem;">{{item.title}}</div>
                 <div style="font-size: 12px; color: #999;">{{item.content}}</div>
               </div>
             </div>
           </div>
        </div>

       
        <script>
            var h = document.documentElement.clientWidth / 7.5 + 'px';
                document.documentElement.style.fontSize = h;

            
            new Vue({
                el: '#app',
                data: function() {
                	return {
						ruleForm:{},
						apis:"/apis"
                	}
                },
                created(){
					if(location.host != 'localhost'){
						this.apis = ""
					}
					axios.get(this.apis +'/api/plan-market/order-page/web/mini-store/info?shop_id='+this.getUrlParam('shop_id'))
						.then(response => {
							if (response.data.msg.code == 0) {
								this.ruleForm = response.data.data
								document.title = this.ruleForm.name
							} else {
								vant.Toast(response.data.msg.info);
							}
						})
					
                },
                mounted () {
					
                },
                methods:{
					
					getUrlParam:function(name) {
					    var query = window.location.search.substring(1);
					    var vars = query.split("&");
					    for (var i=0;i<vars.length;i++) {
					            var pair = vars[i].split("=");
					            if(pair[0] == name){return pair[1];}
					    }
					    return(false);
					}
					
                }
            });

  
        </script>
	</body>
</html>
